<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>스타일 객체</title>
<script type="text/javascript">
	var ctrl = {
			popup: function(el){
				el.style.position = 'absolute';
				el.style.zIndex = '1';
				el.style.left = '50px';
				el.style.top = '50px';
				el.style.width = '100px';
			},
			popdown: function(el){
				el.style.position = 'static';
				el.style.zIndex = '0';
				el.style.left = '';
				el.style.top = '';
				el.style.width = '100%';
			},
			reset: function(){
				var arrDiv = document.getElementsByTagName('div');
				
				for ( var i = arrDiv.length - 1; i > -1; i--) {
					var div = arrDiv[i];
					ctrl.popdown(div);
				}
			},
			toggle: function(el){
				if (el.style.position === 'absolute') {
					ctrl.popdown(el);
				} else {
					ctrl.popup(el);
				}
			}
	};
</script>
</head>
<body>
	<h1>화면에 보이는걸 마구 눌러보아요!</h1>
	<div style="height: 30px; width: 500px; background-color: red; margin-top: 5px;" onclick="ctrl.toggle(this);"></div>
	<div style="height: 30px; width: 500px; background-color: gray; margin-top: 10px;" onclick="ctrl.toggle(this);"></div>
	<div style="height: 30px; width: 500px; background-color: blue; margin-top: 15px;" onclick="ctrl.toggle(this);"></div>
	<div style="height: 30px; width: 500px; background-color: yellow; margin-top: 20px;" onclick="ctrl.toggle(this);"></div>
	<button type="button" onclick="ctrl.reset();">리셋</button>
</body>
</html>
